import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/components/Player.dart';
import 'package:freemusic/components/SongItem.dart';
import 'package:freemusic/model/AbstractSong.dart';
import 'package:freemusic/model/Gedan.dart';
import 'package:freemusic/services/GedanServices.dart';
import 'package:freemusic/stores/GedanStores.dart';
import 'package:freemusic/utils/Util.dart';

enum Action { Ok, Cancel }

final double itemHeight = 60.0;

/*
 * 歌单详情页
 */
class SongSheetPage extends StatefulWidget {
  //歌单名称
  final String sheetName;

  SongSheetPage(this.sheetName);

  @override
  State<StatefulWidget> createState() {
    return SongSheetState();
  }
}

class SongSheetState extends State<SongSheetPage>
    with StoreWatcherMixin<SongSheetPage> {
  GedanStore _gedanStore;
  Gedan gedan = Gedan(gdName: "", description: "");

  @override
  void initState() {
    String gedanName = widget.sheetName;
    GedanServices.getInstace().queryGedanByName(gedanName).then((gedan) {
      this.setState(() {
        this.gedan = gedan;
      });
    });

    _gedanStore = listenToStore(gedanToken);
    super.initState();
  }

  void _handleDeleteOnTap() {
    Color wordColor = Util.themeColor;

    showDialog(
        context: this.context,
        builder: (ctx) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("是否要删除当前歌单？"),
            actions: <Widget>[
              FlatButton(
                child: Text(
                  "取消",
                  style: TextStyle(color: wordColor),
                ),
                onPressed: () {
                  Navigator.pop(this.context, Action.Cancel);
                  Navigator.pop(context, Action.Cancel);
                },
              ),
              FlatButton(
                child: Text(
                  "确认",
                  style: TextStyle(color: wordColor),
                ),
                onPressed: () {
                  GedanServices.getInstace().deleteGedan(gedan).then((f) {
                    if (f) {
                      Navigator.pop(context, Action.Ok);
                      Navigator.pop(context, Action.Ok);
                    }
                  });
                },
              ),
            ],
          );
        });
  }

  void handlePopupMenuButton(String value) {
    switch (value) {
      case "edit":

      case "add":

      case "deleted":
        _handleDeleteOnTap();
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    Gedan gedan = this.gedan;
    List<AbstractSong> songs = _gedanStore.currentSongs;
    Color backgroundColor = Util.backgroundColor;
    return Scaffold(
      extendBody: true,
      backgroundColor: backgroundColor,
      body: SingleChildScrollView(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Color.fromRGBO(158, 154, 136, 1),
                Color.fromRGBO(183, 158, 124, 1),
                Color.fromRGBO(154, 134, 98, 1),
              ],
            ),
          ),
          child: Column(
            children: <Widget>[
              _SongSheetHeader(
                gedanName: gedan.gdName,
                picture: gedan.picture,
                description: gedan.description,
              ),
              _SongContent(
                songs: songs,
                gedan: gedan,
              ),
            ],
          ),
        ),
      ),
      bottomNavigationBar: PlayerWidget(),
    );
  }
}

class _SongSheetHeader extends StatelessWidget {
  final String picture;
  final String gedanName;
  final String description;

  const _SongSheetHeader(
      {Key key, this.picture, this.gedanName, this.description})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    Color white = Colors.white;
    Color wordColor = Util.wordColor;
    return Container(
      padding: EdgeInsets.only(bottom: 20.0),
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  height: 60,
                  padding: EdgeInsets.only(left: 8),
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: () {
                      Navigator.of(context).pop(1);
                    },
                    child: Row(
                      children: <Widget>[
                        Icon(
                          Icons.arrow_back,
                          color: white,
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 8),
                          child: Text(
                            "歌单",
                            style: TextStyle(fontSize: 18, color: white),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    padding: EdgeInsets.all(12),
                    child: Icon(
                      Icons.more_horiz,
                      color: white,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(left: 10, right: 10),
                width: 150,
                height: 150,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12.0),
                  child: Image.asset("images/sheet.png"),
                ),
              ),
              Container(
                height: 150,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      gedanName,
                      style: TextStyle(color: white, fontSize: 18),
                    ),
                    Text(
                      "简介：$description",
                      style: TextStyle(
                        color: wordColor,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _SongContent extends StatelessWidget {
  final List<AbstractSong> songs;
  final Gedan gedan;

  const _SongContent({Key key, this.songs, this.gedan}) : super(key: key);

  List<SongItem> _renderSongItem() {
    List<SongItem> songItems = List();
    int index = 1;
    songs.forEach((song) {
      songItems.add(SongItem(
        song: song,
        index: index++,
        gedanId: gedan.id,
        type: SongItemType.Gedan,
      ));
    });
    return songItems;
  }

  @override
  Widget build(BuildContext context) {
    int itemCount = songs.length;
    double height = itemCount * itemHeight;
    Color backgroundColor = Util.backgroundColor;
    Color themeColor = Util.themeColor;
    return Container(
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      child: Column(
        children: <Widget>[
          Container(
            height: 60,
            padding: EdgeInsets.only(left: 8, right: 8),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                GestureDetector(
                  onTap: () {
                    GedanServices.getInstace()
                        .playGedanAllSong(gedan.id, songs);
                  },
                  behavior: HitTestBehavior.opaque,
                  child: Row(
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(right: 8),
                        child: Icon(
                          Icons.play_circle_filled,
                          color: themeColor,
                          size: 28,
                        ),
                      ),
                      Text(
                        "全部播放（$itemCount 首）",
                        style: TextStyle(fontSize: 16),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: height,
            child: Column(
              children: _renderSongItem(),
            ),
          ),
          Container(
            height: itemHeight,
          ),
        ],
      ),
    );
  }
}
